<!-- FirstLeftEnd -->
<template>
  <div class="FirstLeftEnd">
    <!--        <div class="card table fle1">-->
    <!--            <div class="fle-title">实时图书馆数据</div>-->
    <!--            <div id="fle1"></div>-->
    <!--        </div>-->
    <!--        <div class="card table fle2">-->
    <!--            <div class="fle-title">今日就坐情况</div>-->
    <!--            <div id="fle2"></div>-->
    <!--        </div>-->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
import * as echarts from "echarts";
import $ from "jquery";

// let myChart = echarts.init(document.getElementById("fle1"));
// let fle2 = echarts.init(document.getElementById("fle2"));

export default {
  name: "FirstLeftEnd",
  components: {},
  props: [],
  data() {
    //这里存放数据
    return {
      opt1Data: [],
      optDataLength: 4,
      fle1: null,
      fle2: null,
      opt1: {
        grid: {
          left: "0%",
          right: "8%",
          top: "8%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: {
          max: "dataMax",
        },
        yAxis: {
          type: "category",
          data: [
            "数图\n一楼阅览室",
            "数图\n二楼阅览室",
            "老图\n一楼电脑室",
            "老图\n二楼阅览室",
          ],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          // max: 2, // only the largest 3 bars will be displayed
          max: 3, // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: [],
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
            },
          },
        ],
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      },
      opt2: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "bottom",
          textStyle: {
            //标题内容的样式
            // color: "#666", //京东红
            fontStyle: "normal", //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
            fontWeight: "500", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
            fontFamily: "san-serif", //主题文字字体，默认微软雅黑
            fontSize: 10, //主题文字字体大小，默认为18px
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "3%",
          bottom: "22%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["8", "10", "12", "14", "16", "18", "20"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数图一楼阅览室",
            type: "line",
            data: [10, 20, 51, 44, 90, 120, 10],
          },
          {
            name: "数图二楼阅览室",
            type: "line",
            data: [20, 30, 80, 48, 89, 99, 20],
          },
          {
            name: "老图一楼电脑室",
            type: "line",
            data: [13, 40, 61, 74, 28, 101, 19],
          },
          {
            name: "老图二楼电脑室",
            type: "line",
            data: [16, 10, 91, 90, 75, 120, 5],
          },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 初始化
    init() {
      let that = this;
      this.fle1 = echarts.init(document.getElementById("fle1"));
      this.fle2 = echarts.init(document.getElementById("fle2"));
      this.fle1.setOption(this.opt1);
      this.fle2.setOption(this.opt2);

      setTimeout(this.run, 0);
      setInterval(function () {
        that.run();
      }, 10000);
    },

    // fle1 刷新
    run() {
      let data = [];
      for (var i = 0; i < this.optDataLength; ++i) {
        data[i] = Math.round(Math.random() * 200);
      }
      this.fle1.setOption({
        series: [
          {
            type: "bar",
            data,
          },
        ],
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.init();
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.FirstLeftEnd {
  padding: 0 20px;
  width: 100%;
  height: 100%;

  .card {
    display: inline-block;
    background-color: #fff;
    padding: 10px 20px;
  }

  .fle-title {
    line-height: 30px;
    font-size: 18px;
    font-weight: 500;
    color: #666;
  }

  .fle1 {
    height: 100%;
    width: calc((100% - 30px) * 0.6);
    margin-right: 30px;
    vertical-align: top;
  }

  .fle2 {
    width: calc((100% - 30px) * 0.4);
    height: 100%;
  }

  #fle1 {
    height: calc(100% - 30px);
    width: 100%;
  }

  #fle2 {
    height: calc(100% - 30px);
    width: 100%;
  }
}
</style>
